فارسی

بر Suspense و Error Boundaries در React مسلط شوید تا مدیریت قوی وضعیت بارگذاری و خطایابی زیبا را پیاده‌سازی کنید. یاد بگیرید چگونه برنامه‌هایی پایدار و کاربرپسند بسازید.

Suspense و Error Boundaries در React: مدیریت پیشرفته بارگذاری و خطا

React Suspense و Error Boundaries ویژگی‌های قدرتمندی هستند که به توسعه‌دهندگان اجازه می‌دهند برنامه‌هایی مقاوم‌تر و کاربرپسندتر بسازند. آن‌ها روشی اعلانی (declarative) برای مدیریت وضعیت‌های بارگذاری و خطاهای غیرمنتظره فراهم می‌کنند که تجربه کاربری کلی را بهبود بخشیده و فرآیند توسعه را ساده‌تر می‌کند. این مقاله یک راهنمای جامع برای استفاده مؤثر از React Suspense و Error Boundaries ارائه می‌دهد و همه چیز را از مفاهیم پایه تا تکنیک‌های پیشرفته پوشش می‌دهد.

درک React Suspense

React Suspense مکانیزمی است برای «به تعویق انداختن» (suspending) رندر یک کامپوننت تا زمانی که یک شرط خاص، معمولاً در دسترس بودن داده از یک عملیات ناهمگام، برآورده شود. این ویژگی به شما امکان می‌دهد تا در حین انتظار برای بارگذاری داده، یک رابط کاربری جایگزین (fallback UI) مانند نشانگرهای بارگذاری نمایش دهید. Suspense مدیریت وضعیت‌های بارگذاری را ساده می‌کند، نیاز به رندر شرطی دستی را از بین می‌برد و خوانایی کد را بهبود می‌بخشد.

مفاهیم کلیدی Suspense

پیاده‌سازی پایه‌ای Suspense

در اینجا یک مثال ساده از نحوه استفاده از Suspense برای نمایش یک نشانگر بارگذاری در حین واکشی داده آورده شده است:


import React, { Suspense } from 'react';

// شبیه‌سازی واکشی داده (مثلاً از یک API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// ایجاد یک منبع که Suspense بتواند از آن استفاده کند
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// کامپوننتی که از منبع داده می‌خواند
const UserProfile = () => {
  const data = userData.read();
  return (
    

Name: {data.name}

Age: {data.age}

); }; const App = () => { return ( Loading user data...
}> ); }; export default App;

در این مثال:

Suspense با تقسیم کد (Code Splitting)

از Suspense می‌توان با React.lazy برای پیاده‌سازی تقسیم کد نیز استفاده کرد. این به شما امکان می‌دهد کامپوننت‌ها را فقط در صورت نیاز بارگذاری کنید و عملکرد بارگذاری اولیه صفحه را بهبود بخشید.


import React, { Suspense, lazy } from 'react';

// بارگذاری تنبل (lazy load) کامپوننت MyComponent
const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    Loading component...}>
      
    
  );
};

export default App;

در این مثال:

درک Error Boundaries

Error Boundaries کامپوننت‌های React هستند که خطاهای جاوااسکریپت را در هر جای درخت کامپوننت‌های فرزند خود می‌گیرند (catch)، آن خطاها را ثبت (log) می‌کنند و به جای از کار افتادن کل برنامه، یک رابط کاربری جایگزین نمایش می‌دهند. آنها راهی برای مدیریت زیبای خطاهای غیرمنتظره فراهم می‌کنند، تجربه کاربری را بهبود می‌بخشند و برنامه شما را قوی‌تر می‌کنند.

مفاهیم کلیدی Error Boundaries

پیاده‌سازی پایه‌ای Error Boundaries

در اینجا یک مثال ساده از نحوه ایجاد یک Error Boundary آورده شده است:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // به‌روزرسانی state تا رندر بعدی رابط کاربری جایگزین را نمایش دهد.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // همچنین می‌توانید خطا را در یک سرویس گزارش خطا ثبت کنید
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // می‌توانید هر رابط کاربری جایگزین سفارشی را رندر کنید
      return 

Something went wrong.

; } return this.props.children; } } export default ErrorBoundary;

در این مثال:

استفاده از Error Boundaries

برای استفاده از کامپوننت `ErrorBoundary`، به سادگی کامپوننت‌هایی را که می‌خواهید از آنها محافظت کنید، با آن در بر بگیرید:


import React from 'react';
import ErrorBoundary from './ErrorBoundary';

const MyComponent = () => {
  // شبیه‌سازی یک خطا
  throw new Error('An error occurred!');
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

در این مثال، اگر خطایی در `MyComponent` رخ دهد، کامپوننت `ErrorBoundary` خطا را گرفته و رابط کاربری جایگزین را نمایش می‌دهد.

ترکیب Suspense و Error Boundaries

Suspense و Error Boundaries می‌توانند برای ارائه یک استراتژی جامع و قوی برای مدیریت خطاهای عملیات ناهمگام ترکیب شوند. با در بر گرفتن کامپوننت‌هایی که ممکن است به تعویق بیفتند با هر دو Suspense و Error Boundaries، می‌توانید هم وضعیت‌های بارگذاری و هم خطاهای غیرمنتظره را به زیبایی مدیریت کنید.

مثالی از ترکیب Suspense و Error Boundaries


import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

// شبیه‌سازی واکشی داده (مثلاً از یک API)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // شبیه‌سازی یک واکشی داده موفق
      // resolve({ name: 'John Doe', age: 30 });

      // شبیه‌سازی یک خطا در حین واکشی داده
      reject(new Error('Failed to fetch user data'));

    }, 2000);
  });
};

// ایجاد یک منبع که Suspense بتواند از آن استفاده کند
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// کامپوننتی که از منبع داده می‌خواند
const UserProfile = () => {
  const data = userData.read();
  return (
    

Name: {data.name}

Age: {data.age}

); }; const App = () => { return ( Loading user data...}> ); }; export default App;

در این مثال:

تکنیک‌های پیشرفته و بهترین شیوه‌ها

بهینه‌سازی عملکرد Suspense

Error Boundaries سفارشی

شما می‌توانید Error Boundaries سفارشی ایجاد کنید تا انواع خاصی از خطاها را مدیریت کنید یا پیام‌های خطای آموزنده‌تری ارائه دهید. برای مثال، می‌توانید یک Error Boundary بسازید که بر اساس نوع خطای رخ داده، یک رابط کاربری جایگزین متفاوت نمایش دهد.

رندر سمت سرور (SSR) با Suspense

از Suspense می‌توان با رندر سمت سرور (SSR) برای بهبود عملکرد بارگذاری اولیه صفحه استفاده کرد. هنگام استفاده از SSR، می‌توانید وضعیت اولیه برنامه خود را روی سرور پیش‌رندر کنید و سپس محتوای باقی‌مانده را به صورت جریانی (stream) به کلاینت ارسال کنید. Suspense به شما امکان می‌دهد واکشی داده ناهمگام را در حین SSR مدیریت کرده و در حین استریم شدن داده، نشانگرهای بارگذاری را نمایش دهید.

مدیریت سناریوهای مختلف خطا

این سناریوهای مختلف خطا و نحوه مدیریت آنها را در نظر بگیرید:

مدیریت خطای سراسری

یک مکانیزم مدیریت خطای سراسری پیاده‌سازی کنید تا خطاهایی که توسط Error Boundaries گرفته نمی‌شوند را مدیریت کنید. این کار را می‌توان با استفاده از یک کنترل‌کننده خطای سراسری یا با در بر گرفتن کل برنامه در یک Error Boundary انجام داد.

مثال‌ها و موارد استفاده در دنیای واقعی

برنامه فروشگاه اینترنتی

در یک برنامه فروشگاه اینترنتی، از Suspense می‌توان برای نمایش نشانگرهای بارگذاری در حین واکشی داده‌های محصول استفاده کرد و از Error Boundaries برای مدیریت خطاهایی که در فرآیند پرداخت رخ می‌دهند، استفاده می‌شود. برای مثال، کاربری از ژاپن را تصور کنید که در حال مرور یک فروشگاه آنلاین واقع در ایالات متحده است. بارگذاری تصاویر و توضیحات محصول ممکن است کمی طول بکشد. Suspense می‌تواند یک انیمیشن بارگذاری ساده را در حین واکشی این داده‌ها از سروری که احتمالاً در نیمه دیگر جهان قرار دارد، نمایش دهد. اگر درگاه پرداخت به دلیل یک مشکل موقتی شبکه (که در زیرساخت‌های مختلف اینترنتی در سراسر جهان رایج است) از کار بیفتد، یک Error Boundary می‌تواند پیام کاربرپسندی را نمایش دهد که از او می‌خواهد بعداً دوباره تلاش کند.

پلتفرم رسانه اجتماعی

در یک پلتفرم رسانه اجتماعی، از Suspense می‌توان برای نمایش نشانگرهای بارگذاری در حین واکشی پروفایل کاربران و پست‌ها استفاده کرد و از Error Boundaries برای مدیریت خطاهایی که هنگام بارگذاری تصاویر یا ویدئوها رخ می‌دهند، استفاده می‌شود. کاربری که از هند در حال مرور است ممکن است زمان بارگذاری کندتری را برای رسانه‌های میزبانی شده بر روی سرورهای اروپایی تجربه کند. Suspense می‌تواند یک placeholder را تا زمان بارگذاری کامل محتوا نشان دهد. اگر داده‌های پروفایل یک کاربر خاص خراب شده باشد (که نادر اما ممکن است)، یک Error Boundary می‌تواند از از کار افتادن کل فید رسانه اجتماعی جلوگیری کرده و به جای آن یک پیام خطای ساده مانند «امکان بارگذاری پروفایل کاربر وجود ندارد» نمایش دهد.

برنامه داشبورد

در یک برنامه داشبورد، از Suspense می‌توان برای نمایش نشانگرهای بارگذاری در حین واکشی داده از چندین منبع استفاده کرد و از Error Boundaries برای مدیریت خطاهایی که هنگام بارگذاری نمودارها رخ می‌دهند، استفاده می‌شود. یک تحلیلگر مالی در لندن که به یک داشبورد سرمایه‌گذاری جهانی دسترسی دارد، ممکن است در حال بارگذاری داده از چندین بورس در سراسر جهان باشد. Suspense می‌تواند نشانگرهای بارگذاری را برای هر منبع داده فراهم کند. اگر API یکی از بورس‌ها از کار افتاده باشد، یک Error Boundary می‌تواند یک پیام خطا به طور خاص برای داده‌های آن بورس نمایش دهد و از غیرقابل استفاده شدن کل داشبورد جلوگیری کند.

نتیجه‌گیری

React Suspense و Error Boundaries ابزارهای ضروری برای ساخت برنامه‌های React مقاوم و کاربرپسند هستند. با استفاده از Suspense برای مدیریت وضعیت‌های بارگذاری و Error Boundaries برای مدیریت خطاهای غیرمنتظره، می‌توانید تجربه کاربری کلی را بهبود بخشیده و فرآیند توسعه را ساده‌تر کنید. این راهنما یک مرور جامع از Suspense و Error Boundaries ارائه داد و همه چیز را از مفاهیم پایه تا تکنیک‌های پیشرفته پوشش داد. با پیروی از بهترین شیوه‌های ذکر شده در این مقاله، می‌توانید برنامه‌های React قوی و قابل اعتمادی بسازید که حتی چالش‌برانگیزترین سناریوها را نیز مدیریت کنند.

همانطور که React به تکامل خود ادامه می‌دهد، Suspense و Error Boundaries احتمالاً نقش مهم‌تری در ساخت برنامه‌های وب مدرن ایفا خواهند کرد. با تسلط بر این ویژگی‌ها، می‌توانید از دیگران پیشی بگیرید و تجربه‌های کاربری استثنایی ارائه دهید.